<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange"
    >
    </el-cascader>
  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      area1: ""
    };
  },

  methods: {
    handleChange(value) {
      let str = "";
      try {
        if (this.selectedOptions.length >= 3) {
          str = this.selectedOptions
            .map(code => CodeToText[code] || "")
            .join("/");
        } else {
          console.error("selectedOptions.value does not have enough elements");
        }
      } catch (error) {
        console.error("An error occurred:", error);
      }
      console.log(str);
    }
  }
};
</script>
<style scoped></style>
